
<template>
  <div>
    <vue-drag-zoom ref="dragZoom" :allow-zoom="false" :width="width" :height="height" :area-width="areaWidth" :area-height="areaheight" :left="left" :top="top" v-show="dragShow">
      <div class="upload-progress-group" :style="{width:width+'px',height:height+'px'}">
        <div class="upload-progress-header">
          <i class="el-icon-copy-document" v-if="isShowBig" @click="isShowBig=false"></i>
          <i class="el-icon-full-screen" v-if="!isShowBig" @click="isShowBig=true"></i>
        </div>
        <div class="upload-progress-table" v-show="isShowBig">
          <el-table
            :data="tableData"
            border
            height="350"
            ref="multipleTable"
            header-cell-class-name="table-header"
          >
            <el-table-column label="文件名" align="center">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="类型" align="center">
              <template slot-scope="scope">{{ scope.row.fileType }}</template>
            </el-table-column>
            <el-table-column label="上传进度" align="center" width="200">
              <template slot-scope="scope">
                <el-progress :percentage="0"  :id="'upload_progress_'+scope.row.id"></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="上传状态" align="center">
              <template slot-scope="scope">
                <span :id="'upload_msg_'+scope.row.id"></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    @click="againUpload(scope.row)"
                    :id="'upload_button_'+scope.row.id"
                    type="text"
                    slot="reference"
                    style="color: #f56c6c;display:none;"
                    >重新上传</el-button
                  >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </vue-drag-zoom>
  </div>
</template>

<script>
import VueDragZoom from 'vue-drag-zoom';
import bus from '@/common/bus';
export default {
  name: "waters",
  components:{VueDragZoom},
  data() {
    return {
      customColor: '#409eff',
      errColor: 'red',
      tableData:[],
      editVisible:false,
      areaWidth:0,
      areaheight:0,
      left:0,
      top:0,
      isShowBig:false,
      dragShow:false,
      width:800,
      height:400,
      upLoadJson:{}
    };
  },
  mounted(){
    let width=window.screen.width,height=window.screen.height;
    this.areaWidth=width;
    this.areaheight=height;
    this.left=width-820;
    this.top=height-580;
  },
  created() {
    bus.$on('global-uploader-list', list => {
        this.tableData = list;
        let upLoadJson={}
        list.forEach(item=>{
          upLoadJson[item.id]='ok';
        })
        this.upLoadJson=upLoadJson;
    });
    bus.$on('global-uploader-change', (id,status) => {
        this.$nextTick(()=>{
          document.querySelector('#upload_progress_'+id).querySelector('.el-progress-bar__inner').style.width=status.progress+'%';
          document.querySelector('#upload_progress_'+id).querySelector('.el-progress-bar__inner').style.backgroundColor=status.type=='error'?'red':(status.type=='md5'?'#67C23A':'#409eff');
          document.querySelector('#upload_progress_'+id).querySelector('.el-progress__text').innerHTML=status.progress+'%';
          document.querySelector('#upload_msg_'+id).innerHTML=status.msg;
          document.querySelector('#upload_button_'+id).style.display=status.type=='error'?'inline-block':'none';
        })
        this.upLoadJson[id]=status.type;
        window.sessionStorage.setItem('uploadResuolute',JSON.stringify(this.upLoadJson));
        if(status.type == 'success'){
          bus.$emit("media-change");
        }
    });
    bus.$on('global-close-open', res => {
        this.dragShow = res;
        this.isShowBig=res
    });
  },
  watch:{
    isShowBig:function(val){
      console.log(val);
      if(val){
        this.resultMethod()
      }else{
        this.sxMethod()
      }
    }
  },
  methods: {
    againUpload(data){
      bus.$emit('alone-uploader-open', true,{uploadId:data.id,...data.params});
    },
    openModel(){
      this.dragShow = true;
      this.isShowBig=true
    },
    //列表加载
    initAjaxMethod() {
      this.$http
        .post(this.$API.TAG_INDEX)
        .then((res) => {
          if (res.code == 1) {
            let list=Array.isArray(res.data)?res.data:[];
            this.treeData = list;
          }
        })
    },
    resultMethod(){
      this.width=800;
      this.height=400;
      this.$refs.dragZoom.$el.style.top=this.top+'px';
      this.$refs.dragZoom.$el.style.left=this.left+'px';
    },
    sxMethod(){
      this.width=100;
      this.height=30;
      this.$refs.dragZoom.$el.style.top=window.screen.height-280+'px';
      this.$refs.dragZoom.$el.style.left=window.screen.width-120+'px';
    }
  },
};
</script>

<style scoped>
    .upload-progress-group{
      border:1px solid #999;
      border-radius: 6px;
      background: #fff;
      cursor: move;
      box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2);
      overflow: hidden;
    }
    .upload-progress-header{
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background: #fafafa;
    }
    .upload-progress-header i{
      margin:0 15px;
      font-size: 20px;
      color:#999;
    }
    .upload-progress-header i:hover{
      cursor: pointer;
      color:#66b1ff;
    }
    .xx-drag-zoom{
      position: fixed;
      right:10px;
      bottom:0;
      z-index:9999;
    }
    .upload-progress-open{
      position: fixed;
      right:30px;
      bottom:100px;
      z-index: 999;
    }
</style>
